<template>
    <div class="listBox" :class="{listBox2:islistBox2}">
        <div class="kong"></div>
        <div class="top">
            <p><span>正在播放列表</span></p>
        </div>
        <div class="list_com">
            <ul>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
                <li>
                    <p>songname</p>
                    <p>name</p>
                </li>
            </ul>
        </div>
        <div class="dow_footer" @click="down">
            <p>关闭</p>
        </div>
    </div>
</template>
<script>
export default {
  name: "",
  methods: {
    down() {
      this.$store.commit("listOpenDow", false);
    }
  },
  computed: {
    islistBox2() {
      return this.$store.state.islistOp;
    }
  }
};
</script>
<style lang="scss" scoped>
.listBox {
  width: 100%;
  height: 100%;
  transform: translateY(+100%);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9999;
  transition: 0.5s;
  opacity: 0;
  .kong {
    width: 100%;
    height: 10%;
    background: rgba(0, 0, 0, 0.5);
  }
  .top {
    width: 100%;
    height: 10%;
    background: #f2f4f5;
    position: relative;
    p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      font-size: 13px;
    }
  }
  .list_com {
    width: 100%;
    height: 70%;
    background: #fff;
    overflow: auto;
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 2rem;
        border-bottom: 1px solid #e5e5e5;
      }
    }
  }
  .dow_footer {
    width: 100%;
    height: 10%;
    background: #f2f4f5;
    position: relative;
    p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 15px;
      color: #494a4a;
    }
  }
}
.listBox2 {
  transform: translateY(0%);
  opacity: 1;
}
</style>
